

<!-- 寄回商品 -->
<template>
	<view class="content">
	
		<!-- header部分 -->
		<view class='header-Container header-height'>
			<view class="header-bg"></view>
			<navHeader pageTitle="寄回商品" colorTheme="black">
			</navHeader>
		</view>
		
		<!-- 售后信息 -->
		<view class="saleInfo-Container">
			<view @click="gotoLogisticsList()" class="oneRow borderOneRpx">
				<view class="formLabel">
					<text class="mustInput">*</text> 选择物流
				</view>
				<view class="formValue">
					<view class="value">
						{{logisticsName || '请选择'}}
					</view>
					<image :src="icon.rightBtn" mode=""></image>
				</view>
			</view>
			<view class="oneRow">
				<view class="formLabel">
					<text class="mustInput">*</text> 物流单号
				</view>
				<view class="formValue">
					<input v-model="expressNumber" class="value expressNumber"/>
				</view>
			</view>
		</view>
		
		<!-- 问题描述 -->
		<view class="saleInfo-Container applyDetail-Container">
			<view class="oneRow">
				<view class="formLabel">
					<text class="mustInput">*</text> 备注
				</view>
				<view class="formValue">
				</view>
			</view>
			<uploadProof placeholderText="请补充说明，选填..." @contentChange="contentChange" :upLoadLists="upLoadLists" @deleteImage="deleteImage" @chooseImage="chooseImage"></uploadProof>
		</view>
		
		<!-- 提交 -->
		<view @click="submitSendGoodHandler()" class="submitAddSale">
			提交
		</view>
	</view>
</template>

<script>
	import {
		mapState,
		mapMutations
	} from 'vuex'
	
	import navHeader from '@/components/nav-header/nav-header';
	import uploadProof from "@/components/uploadProof/uploadProof";
	
	export default {
		components: {
			navHeader,
			uploadProof
		},
		computed: {
			...mapState(['imgSite', 'apiSite'])
		},
		data() {
			return {
				icon: {
					backBtn: "/static/images/common/return.png",
					menuBtn: "/static/images/common/menuBtn.png",
					rightBtn: "/static/images/afterSale/addSale/rightBtn.png",
					addressIcon: "/static/images/afterSale/addSale/addressIcon.png"
				},
	
				returnId: "",
				logisticsName: "",
				expressNumber: "",
				remarkContent: "",
				upLoadLists: [],
				type:'0'
			};
		},
		onLoad(options) {
			this.returnId = options.returnId;
			this.type = options.type;
		},
		onShow() {
			var that = this;
			uni.$on('selectLogistics', function(logistics) {
				that.logisticsName = logistics.value;
			});
		},
		methods:{
			
			//描述内容
			contentChange(content) {
				this.remarkContent = content;
			},
			
			// 上传图片
			chooseImage() {
				
				let that = this;
				uni.chooseImage({
					count: 1, //默认9
					sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
					sourceType: ['album'], //从相册选择
					success: chooseImageRes => {
						const tempFilePaths = chooseImageRes.tempFilePaths;
				
						// #ifdef APP-PLUS
							uni.uploadFile({
								url: that.apiSite + '/u_avt', //仅为示例，非真实的接口地址
								filePath: tempFilePaths[0],
								name: 'file',
								formData: {
								}, 
								success: (uploadFileRes) => {
									that.upLoadLists.push(JSON.parse(uploadFileRes.data).response[0]);
								},
								fail:(res) =>{
									console.log(res);
								}
							});
						// #endif
						// #ifndef APP-PLUS
						that.$api.globalUtil.imgAjax({
							url: '/u_avt',
							method: 'POST',
							filePath: tempFilePaths[0],
							name: 'file',
							data: {},
							success: function(res) {
								that.upLoadLists.push(res.response[0]);
							}
						});		
						// #endif
					}
				});
			},
			
			
			// 删除图片
			deleteImage(index) {
				console.log("删除第："+index);
				this.upLoadLists.splice(index, 1);
			},
			
			
			//  选择物流
			gotoLogisticsList() {
				uni.navigateTo({
					url: 'logisticsList'
				})
			},
			
			
			// 寄回商品
			submitSendGoodHandler() {
				// this.$api.msg("寄回商品");
				if(!this.logisticsName) {
					this.$api.msg('请选择物流!');
					return;
				}
				if(!this.expressNumber) {
					this.$api.msg('请填写物流单号!');
					return;
				}
				if(!this.expressNumber) {
					this.$api.msg('请填写物流单号!');
					return;
				}
				var regular = /^[0-9a-zA-Z]*$/g;
				if(!regular.test(this.expressNumber)) {
					this.$api.msg('物流单号由字母或数字组成!');
					return;
				}
				if(!this.remarkContent) {
					this.$api.msg("请输入问题描述!");
					return ;
				}
				
				var that = this;
				that.$api.globalUtil.requestAjax({
					url: '/OrderApi/returnOrderGoodInfos',
					method: "POST",
					data: {
						action: that.type, //0:寄回商品 1：修改寄回商品信息
						returnId: that.returnId,
						logisticsName: that.logisticsName,
						expressNumber: that.expressNumber,
						returnGoodImage: this.upLoadLists.join(","),
						returnGoodRemark: that.remarkContent
					},
					success: function(res) {
						if(res.data.success) {
							uni.navigateBack({
								delta:1
							})
						}
					},
				});
			}
		}
	}
</script>

<style lang="less">
	
	page,
	.content {
		background: #F5F5F5;
		height: 100%;
	}
	
	// header部分
	.header-Container {
		width: 100%;
		height: 176rpx;
		box-shadow: 0px 1px 1px 0px rgba(0, 0, 0, 0.08);
		background: rgba(255, 255, 255, 1);
	
		.leftBtns {
			display: flex;
			align-items: center;
			justify-content: flex-start;
			position: absolute;
			bottom: 0;
			width: 100%;
			height: 86rpx;
	
			.back {
				position: relative;
				z-index: 99;
				margin-left: 17rpx;
				width: 44rpx;
				height: 44rpx;
			}
		}
	
		.title {
			position: absolute;
			bottom: 0;
			width: 100%;
			height: 86rpx;
			line-height: 86rpx;
			text-align: center;
			font-size: 36rpx;
			font-family: PingFang SC;
			font-weight: bold;
			color: rgba(51, 51, 51, 1);
		}
	}
	
	//售后信息
	.saleInfo-Container {
		margin-top: 20rpx;
		padding: 0 30rpx;
		background: rgba(255, 255, 255, 1);
		border-radius: 16rpx;
	
		.oneRow {
			display: flex;
			justify-content: space-between;
			position: relative;
			width: 100%;
			height: 90rpx;
			line-height: 90rpx;
	
			&.borderOneRpx:after {
				border-top: 0;
				border-left: 0;
				border-right: 0;
				border-color: rgba(238, 238, 238, 1);
			}
	
			.formLabel {
				height: 90rpx;
				line-height: 90rpx;
				font-size: 24rpx;
				font-family: PingFang SC;
				// font-weight:500;
				color: rgba(102, 102, 102, 1);
			}
	
			.formValue {
				display: flex;
				align-items: center;
				margin-left: auto;
	
				.value {
					height: 90rpx;
					line-height: 90rpx;
					font-size: 24rpx;
					font-family: PingFang SC;
					// font-weight:500;
					color: rgba(51, 51, 51, 1);
				}
	
				.redValue {
					color: #FE5E49;
				}
	
				image {
					margin-left: 10rpx;
					width: 10rpx;
					height: 17rpx;
				}
			}
			
			.expressNumber {
				width: 450rpx;
				text-align: right;
			}
		}
	}
	
	
	//问题描述
	.applyDetail-Container {
		margin-top: 20rpx;
		padding-bottom: 45rpx;
		width: 750rpx;
		background: rgba(255, 255, 255, 1);
		border-radius: 16rpx;
	}
	
	
	//提交申请
	.submitAddSale {
		margin: 0 auto;
		margin-top: 106rpx;
		margin-bottom: 40rpx;
		width: 400rpx;
		height: 90rpx;
		line-height: 90rpx;
		background: #FE5E49;
		border-radius: 45rpx;
		text-align: center;
		font-size: 34rpx;
		font-family: PingFang SC;
		// font-weight:500;
		color: rgba(255, 255, 255, 1);
	}
</style>



